<template>
  <div>
    <el-form :model="PetForm" :rules="rules" status-icon ref="PetForm" label-width="220px"
             class="demo-ruleForm" style="width:50%;margin-left:230px;">
      <el-form-item prop="age" label="年龄/月">
        <el-input v-model="PetForm.age" placeholder="1"></el-input>
      </el-form-item>
      <el-form-item prop="sex" label="性别">
        <el-radio-group v-model="PetForm.sex">
          <el-radio-button label="公"></el-radio-button>
          <el-radio-button label="母"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="height" label="身高/cm">
        <el-select v-model="PetForm.height" placeholder="请选择">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="weight" label="体重/kg">
        <el-select v-model="PetForm.weight" placeholder="请选择">
          <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="cat_sort" label="类别">
        <el-radio-group v-model="PetForm.cat_sort">
          <el-radio-button label="布偶猫"></el-radio-button>
          <el-radio-button label="加菲猫"></el-radio-button>
          <el-radio-button label="英国短毛猫"></el-radio-button>
          <el-radio-button label="金渐层"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="pic" label="图片路径">
        <el-input v-model="PetForm.pic" placeholder="cat3/英短1"></el-input>
      </el-form-item>
      <el-form-item prop="price" label="价格/元">
        <el-input v-model="PetForm.price" placeholder="1500"></el-input>
      </el-form-item>
      <el-form-item prop="is_coupon" label="优惠码">
        <el-select v-model="PetForm.is_coupon" placeholder="请选择">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="sale_count" label="销售量/只">
        <el-input v-model="PetForm.sale_count" placeholder="200"></el-input>
      </el-form-item>
      <el-form-item prop="memo" label="地址/发货地">
        <el-input v-model="PetForm.memo" placeholder="北京市"></el-input>
      </el-form-item>
      <el-form-item prop="details" label="描述">
        <el-input v-model="PetForm.details" type="text" placeholder="请描述外貌，性格，特征..."></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="cancel()">取消</el-button>
        <el-button type="primary" @click="addSubmit('PetForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  const axios = require('axios')
  export default {
    name: "PetAdd",
    data() {
      return {
        PetForm: {
          age: 2,
          sex: '公',
          cat_sort: '布偶猫',
          height: '',
          weight: '',
          pic: '',
          price: '',
          is_coupon: '',
          sale_count: '',
          details: '',
          memo: ''
        },
        rules: {
          age: [{required: true, message: '年龄不能为空', trigger: 'blur'}],
          sex: [{required: true, message: '选择一项', trigger: 'blur'}],
          cat_sort: [{required: true, message: '选择一项', trigger: 'blur'}],
          height: [{required: true, message: '选择一项', trigger: 'blur'}],
          weight: [{required: true, message: '选择一项', trigger: 'blur'}],
          pic: [{required: true, message: '图片路径不能为空', trigger: 'blur'}],
          price: [{required: true, message: '价格必须填写', trigger: 'blur'}],
          is_coupon: [{required: true, message: '选择一项', trigger: 'blur'}],
          sale_count: [{required: true, message: '销售量不能为空', trigger: 'blur'}],
          details: [{required: true, message: '请描述', trigger: 'blur'}],
          memo: [{required: true, message: '地址不能为空', trigger: 'blur'}],
        },
        options2: [{  // 优惠码
          value: '支持',
          label: '支持'
        }, {
          value: '不支持',
          label: '不支持'
        }],
        options3: [// 身高
          {
            value: '20cm以内',
            label: '20cm以内'
          }, {
            value: '20-30cm',
            label: '20-30cm'
          }, {
            value: '30-40cm',
            label: '30-40cm'
          }, {
            value: '40-50cm',
            label: '40-50cm'
          }, {
            value: '50cm以上',
            label: '50cm以上'
          }],
        options4: [// 体重
          {
            value: '100-700g',
            label: '100-700g (0-2个月)'
          }, {
            value: '700g-1kg',
            label: '700g-1kg (2-12个月)'
          }, {
            value: '1-3kg',
            label: '1-3kg (1-5岁)'
          }, {
            value: '3-5.5kg',
            label: '3-5.5kg (5-7岁)'
          }, {
            value: '5.5-8kg',
            label: '5.5-8kg (7-9岁)'
          }, {
            value: '8kg以上',
            label: '8kg以上 (9岁以上)'
          }]
      }
    },
    methods: {
      cancel() {
        this.$router.go(-1)
      },
      addSubmit(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('校验成功')
            axios.post('http://localhost:9000/cat/save', this.PetForm).then(function (resp) {
              if (resp.data == 'success') {
                _this.$alert('添加成功', '消息', {
                  confirmButtonText: '确定',
                  callback: action => {
                    _this.$router.push('/user/petManage')
                  }
                });
              }
            })
          } else {
            console.log('校验失败')
            return false
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
